<template>
	<view class="tui-card-item">
	
		<block v-for="(item,index) in taskList" :key="index">
			
			<tui-card :image="cardImg" :title="cardTitle" :header="cardHeader" class="tui-card-item">
				<template v-slot:body>
					<view class="tui-box tui-assets-box-list">
						<tui-list-view title="" class="tui-list-view">
							<tui-list-cell class="tui-list">
								<tui-icon name="service-fill" :size="20" color="#ff0000"></tui-icon>
								<text class="tui-list-cell-name">任务名称</text>
								<tui-tag size="small" type="light-green" class="tui-right">{{item.name}}</tui-tag>
							</tui-list-cell>
							<tui-list-cell class="tui-list">
								<tui-icon name="star-fill" :size="20" color="#ff7900"></tui-icon>
								<view class="tui-list-cell-name">销售目标</view>
								<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.goal_cnt}} 元</tui-tag>
							</tui-list-cell>
							<tui-list-cell class="tui-list">
								<tui-icon name="circle-fill" :size="20" color="#ff4700"></tui-icon>
								<view class="tui-list-cell-name">已完成量</view>
								<tui-tag size="small" type="light-green" shape="circle" class="tui-right">{{item.done_cnt}} 元</tui-tag>
							</tui-list-cell>
							<tui-list-cell class="tui-list">
								<tui-icon name="clock" :size="20" color="#19be6b"></tui-icon>
								<view class="tui-list-cell-name">开始时间</view>
								<tui-tag size="small" type="light-gray" class="tui-right">{{item.start_time}}</tui-tag>
							</tui-list-cell>
							<tui-list-cell class="tui-list">
								<tui-icon name="clock-fill" :size="20" color="#ff0000"></tui-icon>
								<view class="tui-list-cell-name">结束时间</view>
								<tui-tag size="small" type="light-gray" class="tui-right">{{item.end_time}}</tui-tag>
							</tui-list-cell>
						</tui-list-view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="tui-default">
						<tui-tag type="light-green" size="small" class="tui-inline">{{item.task_status_name}}</tui-tag>
					</view>
				</template>
			</tui-card>
		
		</block>
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
		
	</view>
</template>

<script>
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTag from "@/components/thorui/tui-tag/tui-tag"
	import tuiCard from "@/components/thorui/tui-card/tui-card"
	import tuiLoadmore from "@/components/thorui/tui-loadmore/tui-loadmore"
	import tuiNomore from "@/components/thorui/tui-nomore/tui-nomore"
	export default {
		components: {
			tuiListCell,
			footerMenu,
			tuiIcon,
			tuiTag,
			tuiCard,
			tuiListView,
			tuiLoadmore,
			tuiNomore,
		},
		data() {
			return {
				cardImg:{ url: "/static/images/basic/badge.png" },
				cardHeader:{ bgcolor: "#F1F1F1", line: true },
				cardTitle:{ text: "销售额任务", color: "#ed3f14", size: 30 },
				
				taskList: [],
				pageIndex: 1,
				pageCount: 0,
				pageTotal: 0,
				loadding: false,
				pullUpOn: true,
			}
		},
		methods: {
			getMyTaskList: function(type) {
				if(type != 'append') this.pageIndex = 1;
				uni.request({
					url: this.$apiUrl + '/api/my-task/sales',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					data: {
						page_num: this.pageIndex
					},
					success: (res) => {
						let resData = res.data['data'];
						if(type == 'append') {		//底部分页加载更多
							this.taskList = this.taskList.concat(resData['list']);
						}else{
							this.taskList = resData['list'];
						}
						this.pageCount = resData['pager']['page_total'];
						this.pageTotal = resData['pager']['count'];
					}
				});
			},
		},
		
		
		onPageScroll(e) {
		//	this.scrollTop= e.scrollTop
		},
		
		onLoad: function(options) {
			this.getMyTaskList();
		},
		
		
		onPullDownRefresh: function() {
		},
		
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == this.pageCount) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getMyTaskList('append');
				this.loadding = true;
			}
		}
		
	}
</script>

<style>
	 page {
		background: #fff;
	}

	.tui-default {
		padding: 20upx 30upx;
	}

	.tui-inline {
		display: inline-block;
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 2upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	
	.tui-list-cell-name {
		padding-left: 20upx;
		vertical-align: middle;
		line-height: 30upx;
	}
	
	.tui-card-item {
		margin: 40rpx 10rpx;
	}
</style>